<script setup lang="ts">
import { requiredCheck, singleIpCheck, validatePortCheck,validMultiMac } from "@/utils/verify";
import { ref } from "vue";
import { addDataByIp, addDataByMac, editDataByMac, editDataByIp } from "@/api/modules/control-strategy/black-list";
import { randomId, randomNum } from "@/utils";

interface Props {
  title?: string;
  rowData?: Object;
  type?: string;
}

const props = withDefaults(defineProps<Props>(), {
  title: "新增",
  rowData: undefined,
  type: 2
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import SelectLinksInput from "@/components/SelectLinksInput/index.vue";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    ip: [...requiredCheck("请输入IP"), { validator: singleIpCheck }],
    mac: [...requiredCheck("请输入MAC"), { validator: validMultiMac }]
  },
  defaultData: {}
});
const ifaces = ref([]);

async function getIface() {
  try {
    const res = await ifaceAll();
    console.log(res);
    if (res) {
      ifaces.value = Object.values(res);
      console.log(ifaces.value);
    }
    Object.values(res);
  } catch (error) {}
}

async function submitCb() {
  await submit({
    addApi: props.type == 1 ? addDataByMac : addDataByIp,
    updateApi: props.type == 1 ? editDataByMac : editDataByIp,
    sendData: {
      name: randomId(),
      mac: props.type == 1 ? updateFormData.mac : undefined,
      ip: props.type == 2 ? updateFormData.ip : undefined,
      id: updateFormData?.id
    }
  });
  emits("success");
}
</script>

<template>
  <div
    class="update-form mg-r-sm"
    style="display: inline-block;height: 53px"
    @click="
      openHandle({
        row: {
          ...rowData
        },
        id: props.rowData?.id
      });

      getIface();
    "
  >
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="400px" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="120px" label-suffix="：">
          <el-form-item v-if="type == 2" label="" prop="ip">
            <el-input style="width: 260px" placeholder="请输入 " v-model="updateFormData.ip" />
          </el-form-item>
          <el-form-item v-if="type == 1" label="" prop="mac">
            <el-input style="width: 260px" placeholder="请输入 " v-model="updateFormData.mac" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  margin-left: 70px !important;
}
</style>
